We have a nice, pristine style sheet, itching for some rules.
Now what?
One of the first things we do when we set up the appearance of a web page, is to set the background. For whatever reason, the default color of a web page background is a ghastly gray (your opinion as to its aesthetic qualities may vary).
We need to get rid of that straight away (otherwise the first visitor to your site will think it was developed in 1994).
A style sheet is simply a set of rules, which determine which elements are to be affected by the rule, and define how any affected elements should appear.
In this case, we want to affect the appearance of the <BODY> element of the page. When creating a rule, we first need to create a selector that specifies which elements the rule applies to.
For simple elements, that is, any HTML elements, such as <BODY>, <P>, <A>, <LI>, and so on, the selector is very simple, just the name of the element, without its angled brackets.
So,
the selector for <P> elements is P
the selector for <A> elements is A
the selector for <LI> elements is LI
What is the selector for the <BODY>?
To create a statement, and its selector
1. choose New Statement... from the Statement window
2. in the dialog box which opens, click
3. the HTML element selector opens
4. From the list of HTML elements, choose the one you want to select with this rule, in this case BODY
5. click
The window will close, and your style sheet will look like this
In the window you can see a single statement in the list on the left hand side. Because it is selected, its selector, and properties appear on the right hand side of the window. At the moment there are no properties defined. We are about to create some.
Now, once we've selected the body using BODY (you guessed the answer right?), we need to finish off the rule by telling the browser how this should be drawn.
In this case we want to set the background color of the body to a particular value.
Here is one of the hard parts of style sheets if you don't use a style sheet editor like Style Master: prodigious feats of memory. There are literally dozens of properties, which can take all kinds of different values.
Just to give you a taste of one of the joys you'll be missing out on…
In the case of background color, the property is called background-color. We want to give the background a nice aqua color, say #66CC99. And, just like with HTML, color-background, background_color or bakground-color will all cause your style sheet not to work.
Personally, I'd rather save the brain cells required to remember such things for the image of Bobby Thomson's line drive sailing through the air and into the lower deck of the left-field stands. That's why I use a style sheet editor.
To do this, we'll tab to the Background Editor.
To tab to an editor
1. in the style sheet window, click the tab of the editor you want to work with
2. the editor comes to the front
The background editor looks like this
To set a background color
1. enter a color value in the color field
Here we are using the familiar hexadecimal system, as you may be familiar with from HTML. With style sheets you can also use RGB values, and keywords.
To choose a keyword, or to change to using rgb
1. click the popup menu to the right of the color field, and choose one of the listed keywords, or choose rgb
You can also edit the color using the a color picker.
To edit the color using the color picker
1. click the colored square to the right of the color field
The Windows color picker opens.
2. pick the color you want, and click
3. the color you picked will now show in the colored square, and the value you chose (translated to hexadecimal) will appear in the color field
And now you have created your first rule.
Now its time to preview. With Style Master, you can preview a style sheet in any HTML document in any browser, with just one click of the mouse.
Previewing in Style Master takes just a little to setup, but once done, is more than useful.
There are two steps in setting up previewing. First set up the preview browsers, then set up your preview documents. You can change these any time you like.
To set up the preview browsers
1. choose in the submenu of the menu
2. the following window opens
3. click
4. Locate the browser you want to add to the list of preview browsers
5. repeat this process until you have added all the preview browsers you'd like to preview in
6. click
7. this list of preview browsers now appears in the submenu of the menu. To preview in a particular one, just choose its name in this menu.
Now we want to set up our preview document or documents.
To set up preview documents
1. choose in the submenu of the menu
2. the following window opens
3. click
4. Locate the document you want to add to the list of preview documents
5. repeat this process until you have added all the documents you'd like to preview using
6. click
7. this list of preview documents now appears in the submenu of the menu. To preview using a particular one, just choose its name in this menu.
Now we've set up previewing, we need to preview the style sheet in the chosen browsers using the chosen document.
To preview a style sheet in the chosen browsers using the chosen document
1. click the preview button in the toolbar. This will launch the selected preview browsers, and preview the selected preview document in them.
Not working? Make sure you check these things...
core-style.css?
Let's get a little fancier, adding a background image. We are also going to see the first example of how style sheets give you more than plain HTML when it comes to style.
First we'll specify a background image, then look at these additional features.
To add additional properties to a statement is no problem. We just set up those properties using the various editors. We'll stay with the background editor.
To set the background image
1. click the popup menu to the right of the field labeled
2a. choose if you know the url of the image you want to be the background, then enter the url in the text field
2b. to more easily choose the background image, choose in the popup menu. The familiar Open dialog box opens. Locate the background image and click . Style Master will place the link from the style sheet to this image in the text field.
Before we go on, let me note that there is serious bug in Navigator 4, which means that relative URLs are treated as relative to the page (HTML file) that is using the style sheet, not the style sheet. For the background image to appear in both Navigator 4 and Explorer 4, the HTML File and the style sheet file must be in the same folder, at the same level. While this situation continues, it's best to type or paste an absolute url (of the form http:// etc.) into the field.
Save your style sheet, then preview your page in a browser.
We've now created a rule that gives the body of a page a background color, and a background image. Let's take a look at these new style sheets features I alluded to above.
With HTML, background images tile, that is, repeat vertically and horizontally down and across a page.
Style sheets let you have much more control over how a background image is displayed.
Here, we are going to make our background image appear once, right in the center of the page.
With style sheets, you can specify whether a background image appears once, or tiles - either like traditional background images, or only horizontally or vertically.
We do this using the background-repeat property which you will find on the background editor. background-repeat can take the values no-repeat, repeat, repeat-x, repeat-y.
To make the image only appear once, use the repeat pop-up menu to give background-repeat a value of no-repeat.
The image can also appear in a particular position on the page (say centered, or fixed in the bottom left of the page). Tiling can also begin at a specified location, not simply in the top left hand corner.
The background-position property determines where the image is positioned. To place the image in the center of the page set both the horizontal and vertical position to the keyword value of center using the pop-up menus.
Your background editor should look a lot like the picture above.
Now, try creating additional properties that specify how the background image of our body will repeat, and be positioned.
You'll find my example answer at the end of the lesson.
Special Note
background-position is not yet supported by Netscape Navigator. The image is always in the top left hand corner of the page. background-repeat does work however.
Both these properties work in Internet Explorer 4.
Save your style sheet, and preview your handy work in a browser.
The most important thing we learnt was how to make rules. A rule comprises a selector (in this case we learnt about HTML element selectors, soon we will learn about others), and a set of properties.
Along the way, we learnt about the background properties available in style sheets.
And we got an important reminder that all is not perfect in the world of style sheet support in the major browsers.
Next we will learn about text, setting a default style for the page, as well as setting up headings.
Here is my go, where I place the background image at the bottom-right of the page, and make it repeat as a sort of bar right the way across the bottom of the page.
BODY
{background-color: #66CC99;
background-image: url(home_lime.gif);
background-position: bottom right;
background-repeat: repeat-x}